<template>
  <div class="wrap" v-loading="loading">
    <div>
      <el-select
        v-model="selectModel.selectCommunityName"
        filterable
        clearable
        placeholder="小区名称"
        @change="handleChange"
      >
        <el-option
          v-for="item in selectModel.options"
          :key="item.id"
          :label="item.communityName"
          :value="item.communityName"
        >
        </el-option>
      </el-select>
    </div>

    <div class="body">
      <template v-for="item in showList">
        <RemarkHouseItem :key="item.id" :item="item">
          <template #default="{ buttonText }">
            <el-button round style="width: 120px" type="primary" @click="handleClick(item)">{{ buttonText }}</el-button>
          </template>
        </RemarkHouseItem>
      </template>

      <el-empty v-show="!showList.length && !loading" description="暂无数据"></el-empty>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      :autoScroll="false"
    ></pagination>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref } from '@vue/composition-api';
import Pagination from '@/components/Pagination';
import RemarkHouseItem from './RemarkHouseItem.vue';
import { getXflfpHouseList } from '@/api/remark';

export default {
  name: 'RemarkHouseListPop',
  components: {
    Pagination,
    RemarkHouseItem
  },
  props: {
    id: String,
  },
  setup(props, ctx) {
    let sourceHouseList = [];
    let currentList = [];
    const queryParams = reactive({
      page: 1,
      pageSize: 10
    });

    const total = ref(0);
    const loading = ref(true);
    const showList = ref([]);
    const getList = ({ page = 1, limit } = {}) => {
      const pageSize = queryParams.pageSize || limit;

      const startIndex = (page - 1) * pageSize;
      showList.value = currentList.slice(startIndex, startIndex + pageSize);
    };

    const selectModel = reactive({
      selectCommunityName: '',
      options: []
    });

    const updateHouse = (list) => {
      currentList = list;
      total.value = list.length;

      getList();
    };

    const handleChange = (e) => {
      const list = !!e ? sourceHouseList.filter((v) => v.communityName === e) : [...sourceHouseList];
      updateHouse(list);
    };

    const handleClick = (item) => {
      loading.value = true
      ctx.emit('triggerRemark', item, () => {
        loading.value = false
      });
    };

    // 测试
    getXflfpHouseList({ userPortId: props.id }).then(({ items, total }) => {
      if (total && Array.isArray(items)) {
        sourceHouseList = items;
        selectModel.options = Object.values(
          sourceHouseList.reduce((res, item) => {
            if (!res[item.communityName]) {
              res[item.communityName] = { id: item.id, communityName: item.communityName };
            }
            return res;
          }, {})
        );
  
        updateHouse(sourceHouseList);
        
        // 测试
        // handleClick(showList.value[0])
      }

    }).finally(() => {
      loading.value = false
    });

    return {
      total,
      queryParams,
      selectModel,
      getList,
      handleChange,
      showList,
      loading,
      handleClick
    };
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.wrap /deep/ .pagination-container {
  padding: 0;
}

.body {
  height: 420px;
  overflow: auto;
  margin-top: 10px;
  @include scrollBar;
}

</style>
